<template>
  <div>
    <el-container>
      <!-- 表格 -->
      <!-- .slice(PageSize2*(currentPage2-1),currentPage2*PageSize2) -->
      <el-main>
        <el-button @click="handleAdd">添加</el-button>
        <el-table v-bind:data="tableData.slice(PageSize2*(currentPage2-1),currentPage2*PageSize2)"
          style="width: 100%"
        >
          <el-table-column label="编号" width="180">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.sex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.age }}</span>
            </template>
          </el-table-column>
          <el-table-column label="籍贯" width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.selectedAddress }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.selectedAddress }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="QQ" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.qq }}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.Email }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <dialoginformation ref="dialoginformation" @newinformation='addinformation' :propData='editData'></dialoginformation>
        <Pagination1 :totalnum='totalCount' @newPage='pageInformation'></Pagination1>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//这就是一个组件，新建组件的基础格式就这样就可以了，在这个里面添加东西
import dialoginformation from '@/components/dialog'
import Pagination1 from '@/components/Pagination'
export default {
  name: "",
  components:{
       dialoginformation,
       Pagination1, 
  },
  data() {
    return {
      editData:{},
      tableData:[],

      PageSize:null,
      editnum:null,
      isEdit:true,
      totalCount:null,
      currentPage2:1,
      PageSize2:3
    };
  },
  methods: {
    handleAdd:function(){
      // 1、点击“添加”按钮，对话框出现-->引入对话框dialog子组件 
      this.$refs.dialoginformation.dialogFormVisible=true;
      this.$refs.dialoginformation.dialogTitle='添加联系人';
      this.isEdit=false
    },
    addinformation:function(val){
      // 8、点击表单“立即创建”按钮时，
      // 需要判断是为编辑更新表单数据创建还是创建新对象
      if(this.isEdit){
        // 9、如果判断为编辑，则需要更新此行的对象数据，赋值触发能使表格数据更新，但触发不了视图更新
        // 触发视图更新需要用this.$set('需要更新的数组'，'更新数组对应的索引'，'更新的数据')
        // this.$set(this.tableData,this.editnum,{...val});

        // 注意：添加分页后，不管第几页触发的更新数据对应在第一页数据显示，需要进行公式转换，使得在对应的行内更新数据
          this.$set(this.tableData,this.editnum+(this.currentPage2-1)*this.PageSize2,{...val});
          debugger
      }
      else {
          this.tableData.push({...val});
          this.totalCount=this.tableData.length
      }
    },
    handleEdit:function(index, row){
        //5、点击“编辑”按钮，需要将点击此行对应的tableData数据回显到子组件dialog中。
        // 怎么实现父组件向子组件传递数据？
        // -->子组件用props接收，父组件用v-bind：子组件接收的数据名='父组件传递的数据名'
      this.$refs.dialoginformation.dialogTitle='编辑联系人';
      this.$refs.dialoginformation.dialogFormVisible=true;
      this.editData={...row};
      this.isEdit=true;
      this.editnum=index
    },
    handleDelete:function(index,row){
      this.tableData.splice(index,1)
    },
    pageInformation:function(val1,val2){
      this.currentPage2=val1;
      this.PageSize2=val2
      debugger
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>